<template>
  <div class="choose-seat-container">
    <div class="choose-seat-head">
      <el-row id="head">
        <el-col :span="8">
          <em>1 选择区域</em>
          <div class="sanGray"></div>
        </el-col>
        <el-col :span="8">
          <em>2 选择座位</em>
          <div class="sanRed"></div>
        </el-col>
        <el-col :span="8">
          <em>3 结账付钱</em>
        </el-col>
      </el-row>
    </div>
    <div id="seatMap" class="'choose-seat-body">
      <div class="seat-charts-row" v-for="(item, x) in seatOrder" :key="x">
        <div v-for="(subItem, y) in getItems(item)" :key="y">
          <div
            v-if="subItem != '_'"
            @click="clickCell"
            :ref="x + 1 + '_' + (y + 1)"
            :class="'seat-charts-cell seat-charts-seat ' + icons[subItem]"
          ></div>
          <div
            v-if="subItem == '_'"
            :class="'seat-charts-cell ' + 'seat-charts-' + icons[subItem]"
          ></div>
        </div>
      </div>
    </div>
    <div class="choose-seat-right"></div>
    <div class="choose-seat-bottom"></div>
  </div>
</template>

<script>
export default {
  name: "chooseSeat",
  methods: {
    getItems(item) {
      return item.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi);
    },
  },
};
</script>

<style scoped>
/**选座头部三部分 */
#head {
  margin-top: 40px;
}
#head .el-col {
  /* border: 1px solid blue; */
  height: 50px;
  background-color: #414141;
}
#head .el-col:nth-of-type(2) {
  background-color: #d8000b;
  height: 52px;
  margin-top: -1px;
}
#head .el-col em {
  line-height: 50px;
  color: white;
}
.sanGray {
  border-top: 25px solid transparent;
  border-left: 40px solid #414141;
  border-bottom: 25px solid transparent;
  position: relative;
  top: -50px;
  left: 409px;
}
.sanRed {
  border-top: 26.5px solid transparent;
  border-left: 45px solid #d8000b;
  border-bottom: 26.5px solid transparent;
  position: relative;
  top: -50px;
  left: 410px;
}
.choose-seat-body {
    top: 50px;
    padding-top: 130px;
    width: 1000px;
    position: absolute;
    overflow: hidden;
}
</style>